<template>
  <div class="root">
<!--    <div class="title">知识管理</div>-->
    <div class="add-employee">
      <button>创建知识点</button>
    </div>
    <div class="employee-list">
      <el-table :data="tableData" style="width: 90%;">
        <el-table-column fixed prop="phone" label="手机号" width="150" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="port" label="岗位" width="120" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="entry_date" label="入职时间" width="120" />
        <el-table-column prop="leave_date" label="离职时间" width="120" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">
              详情
            </el-button>
            <el-button link type="primary" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    phone: '13911780428',
    name: '周景阳',
    sex: '男',
    port: '讲师',
    email: 'zjingyang@sina.com',
    entry_date: '20240102',
    leave_date: '20240102',
    status: '在职',
  },

]
</script>

<style scoped lang="less">
.root{
  //.title{
  //  height: 60px;
  //  line-height: 60px;
  //  text-align: left;
  //  font-weight: bold;
  //  color: #333;
  //  font-size: 18px;
  //  padding-left: 30px;
  //}
  .add-employee{
    text-align: right;
    padding-right: 100px;
    button{
      width: 100px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 14px;
      font-weight: bold;
      color: #333;
      font-size: 14px;
      &:hover{
        color:#00c9bb;
      }
    }
  }
  .employee-list{
    width: 80%;
    padding: 30px;
    margin-top: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    // 让子标签的表格位于中间
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>